<template>
    <div>
      <el-table
        :data="tableDatas.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.goods.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        :header-cell-style="{background:'#eef1f6',color:'#121417'}"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="订单号:">
                <span>{{ props.row.orderId }}</span>
              </el-form-item>
              <el-form-item label="商品名称:">
                <span>{{ props.row.goods }}</span>
              </el-form-item>
              <el-form-item label="购买数量:">
                <span>{{ props.row.amount }}</span>
              </el-form-item>
              <el-form-item label="订单总价:">
                <span>{{ props.row.price }}</span>
              </el-form-item>
<!--              <el-form-item label="尺码:">-->
<!--                <span>{{ props.row.size }}</span>-->
<!--              </el-form-item>-->
              <el-form-item label="地址:">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="购买时间:">
                <span>{{ props.row.buyTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          prop="orderId">
        </el-table-column>
        <el-table-column
          label="商品图片"
          prop="img">
          <template slot-scope="scope">
            <img :src="scope.row.img" width="100" height="100">
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="goods">
        </el-table-column>
        <el-table-column
          label="订单总价"
          prop="price">
        </el-table-column>
        <el-table-column
          label="购买时间"
          prop="buyTime"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="订单状态"
          prop="state">
        </el-table-column>
        <el-table-column
          align="right"
        >
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="small"
              style="float: left;margin-left: -10px"
              @click="logistics(scope.row)">物流</el-button>
            <el-button
              size="small"
              type="danger"
              style="float: right"
              @click="update(scope.row)">确认收货</el-button>
            <el-dialog
              title="物流系信息"
              :visible.sync="logisticsInformation"
              width="50%"
              center
              :append-to-body="true">
              <el-form :model="tableData" ref="tableData" label-width="100px" style="margin-left: 100px" >
                <el-form-item label="物流信息：" prop="name">
                  <el-input v-model="tableData.evaluate" type="textarea" style="width: 250px;" readonly></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                    <el-button @click="logisticsInformation = false">取 消</el-button>
                    <el-button type="primary" @click="logisticsInformation = false">确 定</el-button>
                  </span>
            </el-dialog>
          </template>
        </el-table-column>
        <template slot="empty">
          <div>
            <svg-icon icon-class="ring-list" class="ring-list" />
            <img src="../../../../assets/order.jpg">
            <span style="margin-left: 7%">暂无订单数据</span>
          </div>
        </template>
      </el-table>
      <div>
        <el-pagination align='center'
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="tableDatas.length">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    export default {
        name: "DeliveryOrder",
      data() {
        return {
          tableDatas: [],
          tableData: [],
          search: '',
          currentPage: 1, // 当前页码
          total: 20, // 总条数
          pageSize: 2 ,// 每页的数据条数
          logisticsInformation: false
        }
      },
      mounted() {
        this.manSport();
      },
      inject:[
        'reload'
      ],
      methods: {
        update(order) {
          order.state = "待评价";
          this.$http.post('http://localhost:8888/order/update', order, {emulateJSON: true})
            .then(res => {
            });
          this.reload();
          this.manSport();
        },
        manSport() {
          let id = window.sessionStorage.getItem("id");
          this.$http.post('http://localhost:8888/order/query', {emulateJSON: true})
            .then(res => {
              // console.log('id',res.data.data)
              let orders = res.data.data;
              orders.forEach((item, index, list) => {
                if (item.id == id && item.state == "待发货") {
                  this.tableDatas.push(item)
                }
              })
            })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
          this.currentPage = 1;
          this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
          this.currentPage = val;
        },
        logistics(order){
          this.logisticsInformation = true;
          this.tableData = order;
        },
      },
    }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
    margin-left: 200px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #10728a;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
